<template>
  <div class="project">
    项目模块
    <div class="project-add">
      <el-button type="primary" size="small" @click="increase">新增</el-button>
    </div>
    <tables :tableData="tableData" :params="params" @dels="dels" :page="page" @pageChange="pageChange">
      <!-- 调用这个根据 在标签slot 当中用到的data 来传递数据。这里可以接受传递过来的数据 -->
      <template v-slot:rightBtn="row">
        <el-button type="text" @click="btnClick(row)">修改</el-button>
      </template>
    </tables>
    <dialogs :headerContent="content" :dialogVisible="dialogVisible" @changeVisible="changeVisible">
      <template v-slot:content>
        <el-form :model="ruleForm" ref="ruleForm" label-width="100px" :rules="rules" class="demo-ruleForm">
          <el-form-item label="项目名称" prop="projectname">
            <el-input v-model="ruleForm.projectname"></el-input>
          </el-form-item>
          <el-form-item label="启动时间" prop="times">
              <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.times" style="width: 100%;"></el-date-picker>
          </el-form-item>
          <el-form-item label="施工企业" prop="sources">
            <el-input v-model="ruleForm.sources"></el-input>
          </el-form-item>
          <el-form-item label="施工地点" prop="address">
            <el-input v-model="ruleForm.address"></el-input>
          </el-form-item>
          <el-form-item label="描述" prop="descs">
            <el-input type="textarea" v-model="ruleForm.descs"></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-button type="primary" size="small" @click="submit">确定</el-button>
            <el-button type="primary" size="small" @click="cancel">取消</el-button>
          </el-form-item>
        </el-form>
      </template>
    </dialogs>
  </div>
</template>
<script>
import Tables from "@/components/Table/Table.vue";
import Dialogs from "@/components/Dialog/Dialog.vue"
import request from "@/utils/request";
export default {
  components: {
    Tables,
    Dialogs
  },
  data() {
    return{
      tableData: [],
      //表头
      params: [
        {key: "id",value: 'ID'},
        {key: "projectname",value: "项目名称"},
        {key: "times",value: "启动时间",type: 'date'},
        {key: "sources",value: "施工企业"},
        {key: "address",value: "施工地点"},
        {key: "descs",value: "描述"},
      ],
      content: "新增",
      dialogVisible: false,
      ruleForm: {
        projectname: '',
        times: '',
        sources: '',
        address: '',
        descs: ''
      },
      rules: {
        projectname: [
          {required: true,message: '请输入项目名称',trigger: 'blur'}
        ],
        times: [
          {required: true,message: '请选择时间',trigger: 'blur'}
        ],
        sources: [
          {required: true,message: '请输入施工企业',trigger: 'blur'}
        ],
        address: [
          {required: true,message: '请输入施工地点',trigger: 'blur'}
        ],
        descs: [
          {required: true,message: '请输入描述',trigger: 'blur'}
        ]
      },
      page: {
        pageSize: 1,
        size: 5,
        total: 0
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 获取列表
    getList() {
      request.post('/addProject/list',this.page).then(res => {
        console.log(res,100)
        if(res.data.code == 200) {
          this.tableData = res.data.data.data;
          this.page = {
            pageSize: res.data.data.pageSize,
            size: res.data.data.size,
            total: res.data.data.total
          }
        }
      })
    },
    pageChange(val) {
      console.log(val,113)
      this.page = val;
      this.getList()
    },
    // 修改/ 更新
    btnClick(row) {
      console.log(row,111)
      this.ruleForm = Object.assign({},this.ruleForm,row.data);
      this.dialogVisible = true;
      // let obj = Object.assign({},row,this.ruleForm)
      // request.post('/addProject/update',obj).then(res => {
      //   console.log(res,115)
      // })
    },
    // 提交
    async submit() {
      // /addProject/create
      // 首先默认一个初始值，为新增的接口，如果this.ruleForm存在id，那么就会走入if判断当中，
      // names 重新赋值成修改
      let names = '/addProject/create'
      if(this.ruleForm.id) {
       names = '/addProject/update'
      }
      console.log(this.ruleForm,99)
      let params = await request.post(names,this.ruleForm);
      console.log(params)
      if(params.data.code == 200) {
        this.$message({
          type: 'success',
          message: params.data.messgae
        })
        this.getList()
        this.dialogVisible = false;
      }
    },
    increase() {
      this.dialogVisible = true
    },
    changeVisible(val) {
      this.dialogVisible = val;
    },
    cancel() {
      this.dialogVisible = false;
    },
    dels(row) {
      console.log('删除了')
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 调用接口删除
          this.deletes(row);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    deletes(row) {
      request.post('/addProject/delete',{id: row.id}).then(res => {
        if(res.data.code == 200) {
          this.$message({
            type: 'success',
            message: '已删除'
          });
          this.getList()     
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.project-add {
  margin-bottom: 10px;
}
</style>